<template>
  <view :class="cls">
    <view class="arco-tabs-pane">
      {{ id }}
      <slot></slot>
    </view>
  </view>
</template>

<script lang="ts">
import { computed, getCurrentInstance, inject, reactive, toRefs } from "vue";
import { TabsContext, tabsInjectionKey } from "../arco-tabs/content";
import { isUndefined } from "@/utils/is";
export default {
  name: "Pane",
  options: {
    // 虚拟化节点
    virtualHost: true,
  },
  props: {
    /**
     *  选项卡的标题
     */
    title: String,
    name: {
      type: String,
    },
    // eslint-disable-next-line vue/no-reserved-props
    key: {
      type: String,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const { title } = toRefs(props);
    const prefixCls = "arco-tabs-content-item";

    const instance = getCurrentInstance() as any;

    const tabsCtx = inject<Partial<TabsContext>>(tabsInjectionKey);

    const data = reactive({
      key: instance.uid,
      title,
      disabled: props.disabled,
      //   closable,
      //   slots,
    });

    let uidKey = null;

    const isActive = computed(() => {
      return !isUndefined(tabsCtx)
        ? tabsCtx.activeKey == uidKey
          ? true
          : false
        : false;
    });

    if (instance?.uid) {
      uidKey = tabsCtx.addItem?.(instance.uid, data);
    }

    const cls = computed(() => [
      prefixCls,
      {
        [`${prefixCls}-active`]: isActive.value,
      },
    ]);
    return { cls, id: instance?.uid };
  },
};
</script>
